<!-- MessagesList.vue -->
<template>
        <div v-for="message in messages" :key="message.id">
            <MessageItem :message="message" @like="handleLike" @deleteMessage="handleDeleteMessage" />
        </div>
</template>

<script setup lang="ts">
import MessageItem from './MessageItem.vue';


const props = defineProps({
    messages: {
        type: Array,
        required: true,
    },
});

const emits = defineEmits(['likeMessage','deleteMessage']);

function handleLike(messageId:any) {
    emits('likeMessage', messageId);
}
function handleDeleteMessage(messageId:any) {
emits('deleteMessage', messageId);
}
</script>

<style scoped>
.message-list {
    width:100%;
}
</style>